<template>
  <div>
    <creat v-if="showcreat" @close="showcreat = false" :detailId="detailId" @success="refreshList(pageNo)"></creat>
    <upgrade v-else-if="showupgrade" :detailId="detailId" @close="showupgrade = false" @success="refreshList(pageNo)"></upgrade>
    <check v-else-if="showcheck" @close="showcheck = false"></check>
    <show v-else-if="show" @close="show = false" :detailId="detailId"></show>
    <div v-else>
      <basic-container>
        <!-- <el-header> -->
        <div class="flex_between" style="align-items: flex-start;">
          <el-button size="small" type="success" @click="creatNew()" v-if="permission.udi_create">新增</el-button>
          <el-form :inline="true" style="text-align: right;" size="small" class="ml10" ref="form" :model="form" @keyup.enter.native="refreshList()">
            <el-form-item label="产品UDI管理编号："><el-input placeholder="请输入" v-model="form.name"></el-input></el-form-item>
            <el-form-item label="记录文件名称："><el-input placeholder="请输入"  v-model="form.fileNumber"></el-input></el-form-item>
            <el-form-item label="最小销售单元产品标识："><el-input placeholder="请输入"  v-model="form.versionNumber"></el-input></el-form-item>
            <el-form-item>
              <el-button type="default" plain @click="resetSearch">重置</el-button>
              <el-button type="primary" @click="refreshList(1)">查询</el-button>
              <el-button type="primary" plain @click="showmore = !showmore">
                更多筛选条件
                <i :class="{ 'el-icon-arrow-down': !showmore, 'el-icon-arrow-up': showmore }"></i>
              </el-button>
            </el-form-item>
            <block style="margin-top: 0px;" v-if="showmore">
              <el-form-item label="产品代码：">
                <el-select>
                  <el-select v-model="form.controlStatus">
                    <el-option label="受控" value="0"></el-option>
                    <el-option label="非受控" value="1"></el-option>
                  </el-select>
                </el-select>
              </el-form-item>
              <el-form-item label="产品名称：">
                <el-select v-model="form.fileSource">
                  <el-option label="内部文件" value="0"></el-option>
                  <el-option label="外来文件" value="1"></el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="规格型号：">
                <el-select>
                  <el-select v-model="form.controlStatus">
                    <el-option label="受控" value="0"></el-option>
                    <el-option label="非受控" value="1"></el-option>
                  </el-select>
                </el-select>
              </el-form-item>
              <el-form-item label="管理部门：">
                <el-select>
                  <el-select v-model="form.controlStatus">
                    <el-option label="受控" value="0"></el-option>
                    <el-option label="非受控" value="1"></el-option>
                  </el-select>
                </el-select>
              </el-form-item>
              <el-form-item label="包装产品标识：">
                <el-select>
                  <el-select v-model="form.controlStatus">
                    <el-option label="受控" value="0"></el-option>
                    <el-option label="非受控" value="1"></el-option>
                  </el-select>
                </el-select>
              </el-form-item>
              <el-form-item label="记录流水编号：">
                <el-select>
                  <el-select v-model="form.controlStatus">
                    <el-option label="受控" value="0"></el-option>
                    <el-option label="非受控" value="1"></el-option>
                  </el-select>
                </el-select>
              </el-form-item>
              <el-form-item label="记录保存年限："><el-input placeholder="请输入" v-model="form.fileNumber"></el-input></el-form-item>

              <el-form-item label="编制部门">
                <el-cascader
                  placeholder="请选择"
                  ref="newdept"
                  :options="deptOption"
                  v-model="form.createDept"
                  :show-all-levels="false"
                  :props="{
                    value: 'id',
                    label: 'deptName',
                    emitPath: false
                  }"
                  filterable
                  @change="getMemberOption"
                ></el-cascader>
              </el-form-item>
              <el-form-item label="编制人">
                <el-select placeholder="请选择" v-model="form.createUser" filterable>
                  <el-option v-for="(item, i) in memberOption" :key="i" :value="item.id" :label="item.name"></el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="提交日期：">
                <el-date-picker
                  v-model="form.createTime"
                  type="daterange"
                  start-placeholder="开始日期"
                  value-format="yyyy-MM-dd"
                  end-placeholder="结束日期"
                  :default-time="['00:00:00', '23:59:59']"
                  style="width: 300px;"
                ></el-date-picker>
              </el-form-item>
              <el-form-item label="文件生效日期：">
                <el-date-picker
                  v-model="form.beginTime"
                  type="daterange"
                  start-placeholder="开始日期"
                  value-format="yyyy-MM-dd"
                  end-placeholder="结束日期"
                  :default-time="['00:00:00', '23:59:59']"
                  style="width: 300px;"
                ></el-date-picker>
              </el-form-item>
            </block>
          </el-form>
        </div>
        <!-- </el-header> -->
      </basic-container>
      <basic-container>
        <div v-loading="loading">
          <el-table :data="tableData" :height="$height - 300 + 'px'" >
            <el-table-column type="index" width="50" label="序号"></el-table-column>
            <el-table-column prop="productNumber" label="产品UDI管理编号" width="130" align="center"></el-table-column>
            <el-table-column prop="unitMark" label="最小销售单元产品标识" width="160" align="center"></el-table-column>
            <el-table-column prop="codeSystemName" label="医疗器械唯一标识编码体系名称" width="216" align="center"></el-table-column>
             <el-table-column prop="useUnitQty" label="最小销售单元中使用单元的数量" width="216" align="center"></el-table-column>
            <el-table-column prop="productName" label="产品名称" width="160" align="center"></el-table-column>
            <!-- <el-table-column prop="productName" label="产品代码" width="100" align="center"></el-table-column> -->
            <el-table-column prop="productSku" label="规格型号" width="100" align="center"></el-table-column>
            <el-table-column prop="recordNumber" label="注册证数量" width="100" align="center"></el-table-column>
            <el-table-column prop="packageMark" label="包装产品标识" width="140" align="center"></el-table-column>
            <!-- 0-一维码，1-二维码，2-RFID，3-其他（多个逗号隔开） -->
            <el-table-column prop="markCarrier" label="标识载体" width="140" align="center"></el-table-column>
            <el-table-column prop="manageDeptId" label="管理部门" width="100" align="center"></el-table-column>
            <el-table-column prop="manageUserId" label="负责人" align="center"></el-table-column>
            <!-- 记录文件id(多个逗号隔开) -->
            <el-table-column prop="jiluFilesIds" label="记录文件名称" width="140" align="center"></el-table-column>
            <el-table-column prop="serialNumber" label="记录流水编号" width="140" align="center"></el-table-column>
            <el-table-column prop="retentionPeriod" label="记录保存年限(年)" width="140" align="center"></el-table-column>






            <el-table-column prop="createDeptName" label="编制部门" align="center"></el-table-column>
            <el-table-column prop="createUserName" label="编制人" align="center"></el-table-column>
            <el-table-column prop="createTime" label="提交日期" width="100" align="center"></el-table-column>
            <el-table-column prop="beginTime" label="批准日期" width="100" align="center"></el-table-column>
            <el-table-column prop="address" label="工作流状态" fixed="right" width="100" align="center">
              <template slot-scope="scope">
                <span :class="processStatusList[scope.row.processStatus].class">{{ scope.row.processStatus >= 0 ? processStatusList[scope.row.processStatus].text : '' }}</span>
              </template>
            </el-table-column>
            <el-table-column prop="address" label="上传状态" fixed="right" width="100" align="center">
              <template slot-scope="scope">
                <span>{{ scope.row.invalidStatus >= 0 ? invalidStatusList[scope.row.invalidStatus] : '-' }}</span>
              </template>
            </el-table-column>
            <el-table-column prop="address" label="操作" fixed="right" align="center" width="120">
              <template slot-scope="scope">
                <span class="pointer main_co f14" v-if="permission.udi_show" @click="handleShow(scope.row)">查看</span>
                <span
                  class="pointer main_co f14 ml30"
                  v-if="permission.udi_create && (scope.row.processStatus == 4 || scope.row.processStatus == 5 || scope.row.processStatus == 6)"
                  @click="creatNew(scope.row)"
                >
                  修改
                </span>
              </template>
            </el-table-column>
            <empty slot="empty"></empty>
          </el-table>
          <el-card class="pub_right">
            <el-pagination
              @size-change="sizeChangeHandle"
              @current-change="currentChangeHandle"
              :current-page="pageNo"
              :page-size="pageSize"
              :total="total"
              background
              layout="total, prev, pager, next, jumper"
            ></el-pagination>
          </el-card>
        </div>
      </basic-container>
    </div>
  </div>
</template>

<script>
import { getguifanList } from '@/api/myapi/tixiwenjian';
import { getuserByDept } from '@/api/myapi/common';
import creat from './creat.vue';
import check from './check.vue';
import show from './show.vue';
export default {
  components: {
    creat,
    check,
    show
  },
  data() {
    return {
      tableData: [],
      detailId: '',
      showcreat: false,
      showcheck: false,
      showmore: false,
      show: false,
      pageNo: 1,
      pageSize: 10,
      total: 0,
      loading: false,
      memberOption: [],
      form: {
        name: '', //文件名称
        fileNumber: '', //文件编号
        versionNumber: '', //文件版本号
        fileType: '', //文件类型0-医疗器械，1-体系运行
        beginTime: '', //生效日期
        createTime: '', //创建时间
        createDept: '', //创建部门
        createUser: '', //创建人
        fileSource: '', //文件来源：0-内部文件，1-外来文件
        controlStatus: '' //	文件控制状态：0-受控，1-非受控
      }
    };
  },
  created() {
    this.refreshList(1);
    this.getdeptlist();
  },
  methods: {
    // 新建文件
    creatNew(row) {
      if (row) {
        this.detailId = row.id;
      } else {
        this.detailId = '';
      }

      this.showcreat = true;
    },
    // 获取数据列表
    refreshList(pageNo) {
      this.showcreat = false;
      this.showupgrade = false;
      this.loading = true;
      getguifanList({
        current: pageNo,
        size: this.pageSize,
        descs:'create_time',
        ...this.form
      },'udiprocess').then(({ data }) => {
        console.log(data,'udi列表');
        if (data && data.success) {
          this.tableData = data.data.records;
          this.total = data.data.total;
          this.loading = false;
        }
      });
    },
    resetSearch() {
      this.form = {
        name: '', //文件名称
        fileNumber: '', //文件编号
        versionNumber: '', //文件版本号
        fileType: '', //文件类型0-医疗器械，1-体系运行
        beginTime: '', //生效日期
        createTime: '', //创建时间
        createDept: '', //创建部门
        createUser: '', //创建人
        fileSource: '', //文件来源：0-内部文件，1-外来文件
        controlStatus: '' //	文件控制状态：0-受控，1-非受控
      };
      this.pageNo = 1;
      this.refreshList(this.pageNo);
    },
    getMemberOption(e) {
      getuserByDept({
        deptId: e
      }).then(({ data }) => {
        if (data && data.success) {
          this.memberOption = data.data;
        }
      });
    },
    // 当前页
    currentChangeHandle(val) {
      this.pageNo = val;
      this.refreshList(val);
    }
  }
};
</script>

<style scoped="scoped">
::v-deep .el-form-item--mini.el-form-item,
.el-form-item--small.el-form-item {
  margin-bottom: 10px;
}
::v-deep .el-table__expand-icon{
  font-size: 0;
}
</style>
